<template>
	<view>
		<view class="myheader" :style="{backgroundImage: 'url('+imageURL+')'}">
			<!-- <image style="width: 100%;" src="/static/image_my_top.png"></image> -->
			<view style="width: auto; height: 136rpx; margin-left: 20rpx; 
				display: flex; justify-content: space-between" :style="{paddingTop:bgHeight}">
				<view style="display: flex;margin-top: 26rpx; align-items: center;">
					<u-avatar size="68" src="/static/image_head.png"></u-avatar>
					<view style="display: block; margin-left: 20rpx;" @click="headClick">
						<u-text color="#ffffff" size="36rpx" suffixIcon="arrow-right" iconStyle="color:#ffffff;"
							:text="isLogin?phoneRes:'立即登录'" :bold="true"></u-text>
						<u-text color="#ffffff" size="28rpx" :text="isLogin?info.company:'现在登录，拓展行业人脉'"></u-text>
					</view>
				</view>

				<view style="width: 116rpx;height: 60rpx;background: #007421;border-radius: 100rpx 0rpx 0rpx 100rpx;
					margin-top: 26rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;"
					v-if="isLogin" @click="headClick">
					<u-text text="编辑" color="#ffffff" align="center"></u-text>
				</view>
			</view>

		</view>

		<view style="background-color: #ffffff; border-radius: 20rpx; width: auto; margin-left: 20rpx; margin-right: 20rpx;
			height: 209rpx;margin-top: -100rpx;box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);">
			<u-text customStyle="margin-top: 20rpx;margin-left: 20rpx;" text="我的群聊" size="36rpx" :bold="true"></u-text>
			<view style="display: flex;flex-direction: row;justify-content: space-around; margin-top: 20rpx;">
				<view style="display: block; position: relative;" @click="myGroup(2)" >
					<u-text align="center" :text="sts.sts2" color="#333333" size="40rpx"></u-text>
					<u-text text="已加入" color="#333333" size="26rpx"></u-text>
			
					<view  v-if="sts.is_red!=0"  style="position: absolute; width: 20rpx;height: 20rpx; background: red;border-radius: 50%; right: -8rpx; top: -8rpx;"></view>
				</view>
				<view style="display: block;" @click="myGroup(1)">
					<u-text align="center" :text="sts.sts1" color="#333333" size="40rpx"></u-text>
					<u-text text="审核中" color="#333333" size="26rpx"></u-text>
				</view>
				<view style="display: block;" @click="myGroup(3)">
					<u-text align="center" :text="sts.sts3" color="#333333" size="40rpx"></u-text>
					<u-text text="审核驳回" color="#333333" size="26rpx"></u-text>
				</view>
			</view>
		</view>

		<view style="margin-top: 20rpx;background: #FFFFFF;margin-left: 20rpx;margin-right: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.1);border-radius: 10rpx;height: 397rpx;" v-show="isLogin">
			<u-text text="辅助工具" size="32rpx" customStyle="margin-left: 32rpx;height:70rpx" bold></u-text>
			<u-cell icon="/static/image_my_service.png" size="large" customStyle="height:109rpx;" title="联系客服"
				:isLink="true" @click="callPhone"></u-cell>
			<u-cell icon="/static/imagemy_bingding.png" size="large" customStyle="height:109rpx" title="账号绑定"
				:isLink="true" @click="bingding"></u-cell>
			<u-cell icon="/static/image_my_logout.png" size="large" customStyle="height:109rpx" title="退出登录"
				:isLink="true" :border="false" @click="logoutShow=true"></u-cell>
		</view>
		<u-modal :show="logoutShow" title="退出登录" content="是否退出登录" showCancelButton @confirm="logout"
			@cancel="logoutShow=false"></u-modal>
		<!-- 登录弹框 -->
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" closeable :show="showPop" mode="center"
			@close="closePop" :round="10">
			<view class="u-popup-slot">
				<u-image src="/static/logo_pop.png" width="349rpx" height="304rpx"
					custom-style="margin-left: 155rpx;margin-right: 155rpx"></u-image>
				<view class="agree">
					<u-checkbox-group>
						<u-checkbox @change="radioChange" activeColor="#2DBB55" shape="circle">
						</u-checkbox>
					</u-checkbox-group>

					<text class="tip-text">已阅读并同意</text>
					<text class="reg-agreement-privacy-policy" @click="regAgreementClick">《用户协议》</text>
					<text class="tip-text">及</text>
					<text class="reg-agreement-privacy-policy" @click="regAgreementYinSiClick">《隐私政策》</text>

				</view>
				<view style="display: flex;flex-direction: row;justify-content: center;margin-top: 20rpx;">
					<u-button customStyle="width: 400rpx;margin-bottom: 40rpx;" type="success" shape="circle"
						open-type="getPhoneNumber|agreePrivacyAuthorization" @getphonenumber="wxLogin" v-if="check">手机号一键登录</u-button>
					<u-button v-else customStyle="width: 400rpx;margin-bottom: 40rpx;" type="success" shape="circle" 
						@click="checkboxAgree()">手机号一键登录</u-button>
				</view>
			</view>
		</u-popup>

		<zdy-tabbar :value="value"></zdy-tabbar>
	</view>
</template>

<script>
	import {
		getWxPhone,
		login,
		ownInfo,
		ownGroup,
		logoutWX
	} from '@/api/my.js';
	export default {
		data() {
			return {
				// 获取整个导航栏高度
				bgHeight: this.ToolClass.getNavtionBarAllHeight(),
				// 获取微信胶囊高度
				topHeigh: this.ToolClass.getWXJNHeight(),
				imageURL: require('../../static/image_my_top.png'),
				value: 1,
				isLogin: uni.getStorageSync('isLogin') || false,
				showPop: false,
				info: {
					name: "",
					company: "",
					phone: "",
					info: ""
				},
				logoutShow: false,
				sts: {
					sts1: 0,
					sts2: 0,
					sts3: 0,
					is_red:0,
				},
				shareImageURL: require('../../static/image_my_top.png'),
				check: false,

			}
		},
		watch:{
				
		},
		computed: {
			phoneRes() {
				if (this.info.phone != null && this.info.phone != "") {
					const reg = /^(\d{3})\d{4}(\d{4})$/
					return this.info.phone.replace(reg, '$1****$2')
				} else {
					return this.info.phone
				}
			},
			
		},
		onShow() {
			this.value = 1
			this.isLogin = uni.getStorageSync("isLogin")
			if (this.isLogin) {
				this.getData()
			} else {
				this.sts.sts1 = 0
				this.sts.sts2 = 0
				this.sts.sts3 = 0
				this.is_red = 0
			}

		},
		onShareAppMessage() {
			const promise = new Promise(resolve => {
				setTimeout(() => {
					resolve({
						title: '二手回收交流群'
					})
				}, 2000)
			})
			return {
				title: '二手回收交流群',
				path: 'pages/index/index',
				imageUrl: '../../static/share.png',
				// promise
			}
		},
		methods: {
			checkboxAgree() {
				if (!this.check) {
					uni.showToast({
						title: '请阅读并勾选页面底部协议！',
						icon: 'none'
					})
					return;
				}
			},


			regAgreementClick() {
				this.goToH5(uni.$u.http.config.baseURL + "/point/mini_user/")
			},
			regAgreementYinSiClick() {
				this.goToH5(uni.$u.http.config.baseURL + "/point/mini_secret/")
			},
			// goToH5方法
			goToH5(url) {
				uni.navigateTo({
					url: '/pages-my/pages/webview?url=' + url
				})
			},
			radioChange(e) {
				this.check = e
			},
			closePop() {
				this.showPop = false
			},
			async getData() {
				ownInfo().then(res => {
					this.info = res
				}).catch(err => {
					this.isLogin = false
				})
				ownGroup().then(res => {
					this.sts = res
				}).catch(err => {
					this.isLogin = false
				})
			},
			headClick() {

				if (this.isLogin) {
					uni.navigateTo({
						url: `/pages-my/pages/myInformation`
					})
				} else {
					this.login()
					// this.showPop = true
				}

			},
			login() {
				var than = this;
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log(loginRes);
						login({
							code: loginRes.code,
							app_id: "wx07c6c7321f12486f"
						}).then(data => {
							if (data == null || data == "") {
								than.showPop = true
							} else {
								uni.showLoading({
									title: '正在登录...'
								})
								setTimeout(() => {
									uni.setStorageSync('token', data.token)
									uni.setStorageSync('phone', data.phone)
									uni.setStorageSync('id', data.id)
									uni.setStorageSync('name', data.name)
									uni.setStorageSync('isLogin', true)
									than.isLogin = true
									than.getData()
									uni.hideLoading();
								}, 2000);
							}
						})
					}
				});
			},
			bingding() {
				this.sts.is_red = 0
				uni.navigateTo({
					url: `/pages-my/pages/myBingding`
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '13343215827' //仅为示例
				});
			},
			logout() {
				logoutWX({
					token: uni.getStorageSync("token")
				}).then(res => {
					uni.setStorageSync('token', "")
					uni.setStorageSync('phone', "")
					uni.setStorageSync('id', "")
					uni.setStorageSync('name', "")
					uni.setStorageSync('isLogin', false)
					this.logoutShow = false
					this.isLogin = false
					this.sts.sts1 = 0
					this.sts.sts2 = 0
					this.sts.sts3 = 0
					this.sts.is_red = 0
				})
			},
			myGroup(sts) {
				if (this.isLogin) {
					uni.navigateTo({
						url: `/pages-my/pages/myGroup?sts=` + sts
					})
				} else {
					this.login()
				}

			},
			//微信登录
			async wxLogin(e) {
				console.log(e, 'ee')
				if (!e.detail.iv) {
					uni.showToast({
						title: '获取手机号失败',
						icon: 'none'
					})
					return
				}
				console.log(e.detail.code, '======codecode1111code')
				var than = this;
				getWxPhone({
					code: e.detail.code,
					app_id: "wx07c6c7321f12486f"
				}).then(res => {
					console.log(res, 'ressssss')
					this.phone = res
					uni.login({
						provider: 'weixin', //使用微信登录
						success: function(loginRes) {
							login({
								code: loginRes.code,
								phone: res,
								app_id: "wx07c6c7321f12486f"
							}).then(data => {
								uni.setStorageSync('token', data.token)
								uni.setStorageSync('phone', data.phone)
								uni.setStorageSync('id', data.id)
								uni.setStorageSync('name', data.name)
								uni.setStorageSync('isLogin', true)
								than.isLogin = true
								than.getData()
								than.showPop = false
							})
						}
					});
				}).catch(() => {})
			}
		}
	}
</script>

<style scoped>
	.myheader {
		height: 417rpx;
		background-size: 100%;
	}

	/* 获取同意隐私政策和注册协议 */
	.agree {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
	}

	/* 登录即代表您已同意 */
	.tip-text {
		color: #666666;
		font-size: 24rpx;
	}

	/* 隐私政策、注册协议 */
	.reg-agreement-privacy-policy {
		color: #2DBB55;
		font-size: 24rpx;
	}
</style>